<template>
    <div class="guihua-detail">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>规划规划</el-breadcrumb-item>
            <el-breadcrumb-item>专项发展规划</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="head">
            <div class="left">
                <h3 class="title">长沙市2020年交通局专项发展规划 <span style="margin-left: 20px;font-size: 14px; color: #999999;">{{ruleForm.planNo}}</span></h3>
                <ul class="tag">
                    <li>
                        <span>创建人：</span>
                        <i>{{creator.creatorName}}</i>
                    </li>
                    <li>
                        <span>创建时间：</span>
                        <i>{{ruleForm.createTime}}</i>
                    </li>
                </ul>
            </div>
            <div class="right">
                <el-button type="primary" @click="edit()">编辑</el-button>
            </div>
        </div>
        <div class="addContainer">
            <el-form
                :model="ruleForm"
                ref="ruleForm"
                label-width="150px"
                class="addForm"
            >
                <h3 class="title">
                    <i></i>
                    编制规划基本信息
                </h3>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="规划名称" prop="planName">
                            <el-input v-model="ruleForm.planName" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="规划编号" prop="planNo">
                            <el-input v-model="ruleForm.planNo" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="开始年份" prop="planBeginTime">
                            <el-input v-model="ruleForm.planBeginTime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="截止年份" prop="planEndTime">
                            <el-input v-model="ruleForm.planEndTime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="编制单位" prop="compileUnit">
                            <el-input v-model="ruleForm.compileUnit" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="编制人" prop="compilePerson">
                            <el-input v-model="ruleForm.compilePerson" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="编制时间" prop="compileTime">
                            <el-input v-model="ruleForm.compileTime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="compileAttachmentFileList">
                        <el-form-item label="上传规划" prop="name">
                            <div><i class="el-icon-link"/><span style="color:#4967CF;">长沙市2020年公路运输系统升级项目.pdf</span> <i class="el-icon-download" style="cursor: pointer;margin-left: 20px;color: #4967CF; font-size: 20px;"/></div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="建设内容" prop="remark">
                            <el-input :rows="3" type="textarea" readonly v-model="ruleForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3 class="title">
                    <i></i>
                    编制规划审定
                </h3>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="审定人" prop="auditPerson">
                            <el-input v-model="ruleForm.auditPerson" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审定时间" prop="auditTime">
                            <el-input v-model="ruleForm.auditTime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="fileList">
                        <el-form-item label="附件" prop="name">
                            <div><i class="el-icon-link"/><span style="color:#4967CF;">长沙市2020年公路运输系统升级项目.pdf</span> <i class="el-icon-download" style="cursor: pointer;margin-left: 20px;color: #4967CF; font-size: 20px;"/></div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="审定结果" prop="auditResult">
                            <el-input v-model="ruleForm.auditResult" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审定意见" prop="auditOpinion">
                            <el-input :rows="3" type="textarea" readonly v-model="ruleForm.auditOpinion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3 class="title">
                    <i></i>
                    编制规划批准<span style="margin-left: 20px;font-size: 14px; color: #999999;">市新型智慧城市建设管理应用领导小组审定</span>
                </h3>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="批准人" prop="approvalPerson">
                            <el-input v-model="ruleForm.approvalPerson" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="批准时间" prop="approvalTime">
                            <el-input v-model="ruleForm.approvalTime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="批准结果" prop="isApproval">
                            <el-input v-model="ruleForm.isApproval" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="批准意见" prop="approvalOpinion">
                            <el-input :rows="3" type="textarea" readonly v-model="ruleForm.approvalOpinion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="log">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="操作动态" name="1">
                    <transition name="el-zoom-in-top">
                        <div v-show="isShow" class="transition-box">
                            <el-steps direction="vertical" :active="1">
                                <el-step icon="el-icon-s-help" v-for="(item, index) in logList" :key="index" :title="item.title">
                                    <template slot="description">
                                        <div v-if="item.actionType == 1">
                                            <div><span>创建人：{{item.creatorName}}</span><span style="margin-left: 20px;">{{item.createTime}}</span></div>
                                        </div>
                                        <div v-if="item.actionType == 2">
                                            <div><span>操作人：{{item.actionPerson}}</span><span style="margin-left: 20px;">{{item.createTime}}</span></div>
                                        </div>
                                    </template>
                                </el-step>
                            </el-steps>
                        </div>
                    </transition>
                </el-tab-pane>
            </el-tabs>
            <span class="upDown" @click="isShow=!isShow">{{isShow?'收起':'展开'}}<i :class="isShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i></span>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            creator: {},
            activeName: '1',
            isShow: true,
            logList: [],
            ruleForm: {
				planName: "",
				planNo: "",
				planBeginTime: "",
                planEndTime: "",
                compileUnitId: null,
                compileUnit: '',
                compilePerson: "",
                compileTime: "",
                compileAttachmentId: '',
                compileFileType: null,
                remark: '',
                auditPerson: '',
                auditTime: '',
                auditResult: null,
                auditAttachmentId: '',
                auditFileType: null,
                auditOpinion: '',
                approvalPerson: '',
                approvalTime: '',
                isApproval: null,
                approvalOpinion: '',
                isDelete: 1
            },
            id: null,
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id) {
            this.getDetail();
            this.getCreator();
            this.getLog();
        }
    },
    methods: {
        // 获取详情
        getDetail() {
            this.axios
                .get("/cityPlan/getOne", { params: { id: this.id } })
                .then(res => {
                    this.ruleForm = Object.assign(this.ruleForm, res.data);
                    this.ruleForm.planBeginTime = this.ruleForm.planBeginTime?this.ruleForm.planBeginTime.substr(0, 4):'';
					this.ruleForm.planEndTime = this.ruleForm.planEndTime?this.ruleForm.planEndTime.substr(0, 4):'';
					this.ruleForm.compileTime = this.ruleForm.compileTime?this.ruleForm.compileTime.substr(0, 10):'';
					this.ruleForm.auditTime = this.ruleForm.auditTime?this.ruleForm.auditTime.substr(0, 10):'';
					this.ruleForm.approvalTime = this.ruleForm.approvalTime?this.ruleForm.approvalTime.substr(0, 10):'';
					this.ruleForm.auditResult = this.ruleForm.auditResult==1?'审核通过':'审核不通过';
					this.ruleForm.isApproval = this.ruleForm.isApproval==1?'审核通过':'审核不通过';
                });
        },
        getCreator() {
            this.axios.get("/cityPlan/getOne/log", {params: {planId: this.id, actionType: 1}})
                .then(res => {
                    if (res.code !== 1000) {
                        this.$message.error(res.message);
                    }
                    this.creator = res.data;
                });
        },
        getLog() {
            this.axios.get("/cityPlan/getList/log", {params: {planId: this.id}})
                .then(res => {
                    if (res.code !== 1000) {
                        this.$message.error(res.message);
                    }
                    this.logList = res.data;
                    this.logList.forEach(i => {
                        this.$set(i, 'title', `全市发展规划${i.actionType==1?'新增':i.actionType==2?'编辑':''}`)
                        this.$set(i, 'description', `全市发展规划${i.actionType==1?'新增':i.actionType==2?'编辑':''}`)
                    });
                });
        },
        edit() {
            this.$router.replace({path: '/home/tongchou/ZXguihuaAdd', query: {id: this.id}});
        }
    }
};
</script>

<style lang="less" scoped>
.guihua-detail {
    width: 1205px;
    .head {
        margin: 20px 0;
        padding: 20px;
        background-color: #fff;
        display: flex;
        .title {
            font-size: 24px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }
        .tag {
            display: flex;
            color: #999;
            margin-top: 10px;
            i {
                font-style: initial;
                color: #333;
            }
            li {
                margin-right: 40px;
            }
        }
        .left{
            flex: 1;
            background: #fff;
            padding: 20px 20px 0;
        }
        .right{
            width: 158px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .addContainer {
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        .addForm {
            .el-select,
            .el-input {
                width: 100%;
            }
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            i {
                width: 4px;
                height: 16px;
                display: inline-block;
                background-color: #4967cf;
                margin-right: 6px;
            }
        }
    }
    .log{
        position: relative;
        margin-top: 20px;
        .upDown {
            position: absolute;
            right: 20px;
            top: 5px;
            display: flex;
            width: 70px;
            height: 30px;
            align-items: center;
            background-color: #ffffff;
            justify-content: center;
        }
    }
}
</style>
<style lang="less">
.addForm {
    .el-form-item {
        margin-bottom: 0;
	}
	.el-input {
		height: 40px;
		line-height: 40px;
	}
    .el-input__inner,
    .el-textarea__inner {
        border: none !important;
    }
    .el-form-item__label {
        min-height: 40px;
        line-height: 40px;
	}
	.el-form-item__error {
		display: none;
	}
}
</style>
